<template>
  <div class="artist">
    <br />
    <div class="content_link" v-if="linkList.length > 0">
      <b-row v-for="(item, index) in linkList" :key="index" style="padding: 10px">
        <b-col cols="auto">
          {{ index + 1 }}.&nbsp;&nbsp;
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'artist',
  props: {
    artist_name_parent: String,
  },
  data() {
    return {
      artist: '',
      artist_name: '',
      input: '',
      linkList: [],
    };
  },
  mounted: function() {
    //this.showArtist();
    this.$store.dispatch('hideloader');
    this.showLinks();
  },
  methods: {
    showArtist() {
      this.$axios
        .get('/api/artists-detail/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res;
          this.$route.meta.title = this.artist.name + ' | 链接';
          document.title = this.$route.meta.title;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    showLinks() {
      this.artist_name = this.artist_name_parent;
      this.$route.meta.title = this.artist_name + ' | 链接';
      document.title = this.$route.meta.title;
      this.$axios
        .get('/api/links/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.linkList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  watch: {
    artist_name_parent(val) {
      this.artist_name = val;
      this.$route.meta.title = this.artist_name + ' | 链接';
      document.title = this.$route.meta.title;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content_link {
  color: white;
  font-size: 15px;
  padding: 10px;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.8);
}
</style>
